.effect() {
    animation-duration: .3s;
    animation-fill-mode: both;
    transform-origin: 0 0;
  }

  .rc-cascader {
    font-size: 12px;
    &-menus {
      font-size: 12px;
      overflow: hidden;
      background: #fff;
      position: absolute;
      border: 1px solid #d9d9d9;
      border-radius: 6px;
      box-shadow: 0 0 4px rgba(0,0,0,0.17);
      white-space: nowrap;

      &-hidden {
        display: none;
      }

      &.slide-up-enter, &.slide-up-appear {
        &:extend(.effect);
        opacity: 0;
        animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
        animation-play-state: paused;
      }

      &.slide-up-leave {
        &:extend(.effect);
        opacity: 1;
        animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
        animation-play-state: paused;
      }

      &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
      &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft {
        animation-name: SlideUpIn;
        animation-play-state: running;
      }

      &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
      &.slide-up-appear.slide-up-appear-active&-placement-topLeft {
        animation-name: SlideDownIn;
        animation-play-state: running;
      }

      &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft {
        animation-name: SlideUpOut;
        animation-play-state: running;
      }

      &.slide-up-leave.slide-up-leave-active&-placement-topLeft {
        animation-name: SlideDownOut;
        animation-play-state: running;
      }
    }
    &-menu {
      display: inline-block;
      width: 100px;
      height: 192px;
      list-style: none;
      margin: 0;
      padding: 0;
      border-right: 1px solid #e9e9e9;
      overflow: auto;
      &:last-child {
        border-right: 0;
      }
    }
    &-menu-item {
      height: 32px;
      line-height: 32px;
      padding: 0 16px;
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: all 0.3s ease;
      position: relative;
      &:hover {
        background: tint(#2db7f5, 90%);
      }
      &-disabled {
        cursor: not-allowed;
        color: #ccc;
        &:hover {
          background: transparent;
        }
      }
      &-loading:after {
        position: absolute;
        right: 12px;
        content: 'loading';
        color: #aaa;
        font-style: italic;
      }
      &-active {
        background: tint(#2db7f5, 80%);
        &:hover {
          background: tint(#2db7f5, 80%);
        }
      }
      &-expand {
        position: relative;
        &-icon {
          font-size: 12px;
          color: #999;
          position: absolute;
          right: 16px;
          line-height: 32px;
        }
      }
    }
  }

  @keyframes SlideUpIn {
    0% {
      opacity: 0;
      transform-origin: 0% 0%;
      transform: scaleY(.8);
    }
    100% {
      opacity: 1;
      transform-origin: 0% 0%;
      transform: scaleY(1);
    }
  }
  @keyframes SlideUpOut {
    0% {
      opacity: 1;
      transform-origin: 0% 0%;
      transform: scaleY(1);
    }
    100% {
      opacity: 0;
      transform-origin: 0% 0%;
      transform: scaleY(0.8);
    }
  }

  @keyframes SlideDownIn {
    0% {
      opacity: 0;
      transform-origin: 0% 100%;
      transform: scaleY(0.8);
    }
    100% {
      opacity: 1;
      transform-origin: 0% 100%;
      transform: scaleY(1);
    }
  }
  @keyframes SlideDownOut {
    0% {
      opacity: 1;
      transform-origin: 0% 100%;
      transform: scaleY(1);
    }
    100% {
      opacity: 0;
      transform-origin: 0% 100%;
      transform: scaleY(0.8);
    }
  }